<script>

import vehicleList from '@/mixin/vehicleList'

export default {
  name: 'Contract',
  mixins: [vehicleList]

}
</script>

<template>
  <div class="contract-container">
    <div class="header">车辆列表</div>
    <el-table height="500" :data="vehicleList" border stripe :header-cell-style="{background:'#f4f6f8',color:'#969393'}" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255)">
      <el-table-column type="index" label="序号" align="center" width="80px"></el-table-column>
      <el-table-column prop="driverNum" label="图片" align="center" width="100px">
        <template #default="{row}">
          <el-avatar :size="30" src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/slwl/0aefd0d6-2553-4038-a466-7b2618526046.jpg">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="licensePlate" label="号码" align="center" width="120px"></el-table-column>
      <el-table-column prop="truckTypeName" label="类型" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="driverNum" label="司机数量" align="center" width="80px"></el-table-column>
      <el-table-column label="车辆状态" align="center" width="80px">
        <template #default="{row}">
          {{ row.workStatus === 0 ? '停用' : '启用' }}
        </template>
      </el-table-column>
      <el-table-column prop="deviceGpsId" label="GBS设备ID" align="center" width="120px"></el-table-column>
      <el-table-column prop="allowableLoad" label="实载重量(T)" align="center" width="120px"></el-table-column>
      <el-table-column prop="allowableVolume" label="实载数量(方)" align="center" width="120px"></el-table-column>
    </el-table>

  </div>
</template>

<style scoped lang="scss">
.contract-container {
  padding: 15px;
  background-color: #fff;

  .el-table {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
</style>
